<template>
<body id="paper">
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="code('loginForm')" style="margin-right:60px">登录</el-button>
      </el-form-item>
      <el-form-item style="margin-left:-40px">
      <el-link href="/register" style="margin-right:10px" >忘记密码</el-link>
      <el-link href="/register" style="margin-left:10px">还没有账号？注册</el-link>
    </el-form-item>

    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

        <!-- 验证码弹框 -->
        <el-dialog width="390px" append-to-body
        :visible.sync="dialogVisible2"
        :show-close="false"
        :close-on-click-modal="false">
      <Captcha
        ref="dialogopen"
        :l="42"
        :r="10"
        :w="345"
        :h="200"
        :block_y="catcha.blocky"
        :imgurl="catcha.imgurl"
        :miniimgurl="catcha.miniimgurl"
        :slider-text="catcha.text"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
    </el-dialog>
  </div>
	<div style="width:800px;margin:0 auto; padding:20px 0;">
		 		<a target="_blank" href="https://beian.miit.gov.cn/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> 蜀ICP备2021008536号-1<img src="../assets/img/icon/备案图标.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"> 川公网安备 51012202000940号</p></a>
		 	</div>
  </body>

</template>

<script>
import Captcha from '../components/common/Captha'
  export default {
    name: "Login",
    components: {
     Captcha
   },
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        catcha: {
        blocky: 0,
        imgurl: '',
        miniimgurl: '',
        text: '向右滑动完成拼图',
        h: 300,
        w: 350,
        sh: 45,
        sw: 55,
        // visible: false,
        modifyImg: ''
      }, // 图片验证码传值
        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false,
        dialogVisible2: false,
        left: '',
        uuid: ''
      }
    },
    mounted () {this.getImageVerifyCode()},
    methods: {
      onSubmit() {
      var _this = this
      const jse = new this.$jsEncrypt();
      jse.setPublicKey("MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArUnLWVN7YVeR7GyxZNhMnYtGa5b0TgAlffd6h7DltNDKC1t7vs9YleNF5//NZ+7ETa9TdHWHxoMf5pqhGXFZxc8aICF7WJsk1ow8tAll6CFNpagOhVEyND4NjEJdYOyPNUpvKGJlcpTJ5uoIvShXSovGClmUDOnmHN2/DbfXhtiuIHdSFfxoWPluhJtfOK8bC500qdLjUJiEWQwtPq8Ep6DECGacwAf3SzdJcDcPQ3WssI3q+jHEgzGzfAmE6jTKVkEgxCWnyAJIH7qWhoHz1feapNB6IWt7IB2ElV/jFJ4O0dZJdBCRiI9F9p6CLmObYnQPXyPZwRp13kOWOmLp9wIDAQAB")
      this.$axios.post('/jsonLogin',
            {
              username: jse.encrypt(_this.form.username),
              password: jse.encrypt(_this.form.password),
              code: _this.left.toString(),
              uuid:_this.uuid
            })
            .then(resp=>{
              if(resp.data.code === 200 || resp.data.success === true){
                 var token = resp.headers.authorization;
                _this.$store.commit('changeLogin', token)
                _this.$router.push('/');
              }else{
                 this.$message.error('账号或密码错误');
                 console.log(resp.data.success === true)
              }
            })
            .catch(function (error) {
            })
      },
      getImageVerifyCode() {
      var _this = this;
      this.$axios.get('/getCode', {
      })
      .then(res => {
        if (res) {
          // _this.catcha.blocky = res.data.yHeight
          _this.catcha.imgurl = res.data.data.bigImage
          _this.catcha.miniimgurl = res.data.data.smallImage
          _this.uuid = res.data.data.uuid
          this.$refs.dialogopen && this.$refs.dialogopen.reset(res.data.data.yHeight)
        }
      })
    },
    onRefresh() {
      this.catcha.imgurl = ''
      this.catcha.miniimgurl = ''
      this.getImageVerifyCode()
    },
    onFail () {
        console.log('fail')
    },
    onSuccess (left) {
      var _this = this
      this.axios.get('/checkCode/'+left +'/'+this.uuid)
      .then(resp=>{
         if (resp.data.code === 200) {
          _this.dialogVisible2 = false;
          _this.$refs.dialogopen.handleSuccess()
          _this.left = left;
          _this.onSubmit()
        } else {
          _this.$refs.dialogopen.handleFail()
          _this.dialogVisible2 = true;
          _this.onRefresh()
        }
      })
      .catch(function (error) {
      })
    },
    code(formName){
       var _this = this;
       this.$refs[formName].validate((valid) => {
         if(valid){
           _this.dialogVisible2 = true;
           _this.onRefresh()
         }else {
            _this.dialogVisible2 = false;
          }
     });
    }
      }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 160px auto;
    padding: 35px 35px 15px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 -15px 40px auto;
    color: #3f5b94;
  }
   #paper {
    background:url("../assets/img/bg/a1.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    margin: 0;
  }
  body{
     margin: 0;
   }
  .login-content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.5);
  .login-info {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -180px;
    width: 500px;
    height: 360px;
    background-color: #fff;
    padding-top: 30px;
    padding-right: 40px;
    h2 {
      text-align: center;
      margin-bottom: 30px;
    }
    .forget {
      margin-left: 264px;
    }
  }
}
</style>


